<template>
  <div>
    <el-card>
      <div class="summarize">
        <span style="font-size: 20px;">{{detailData.product_name}}</span>
        <div>
          <span>概述</span>
          <span>参数</span>
          <span>用户评价</span>
        </div>
      </div>
    </el-card>
    <div class="slideshow">
      <div class="slideshowLeft">
        <el-carousel height="560px" width="560px" indicator-position="outside">
          <el-carousel-item v-for="item in detailPicture" :key="item.id">
            <img :src="'http://106.15.179.105:3000/'+item.product_picture" alt />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="slideshowRight">
        <p style="font-size: 24px;">{{detailData.product_name}}</p>
        <p style="color: rgb(176, 176, 176);padding-top: 10px;">{{detailData.product_intro}}</p>
        <p style="color: rgb(255, 103, 0);padding-top: 10px;">小米自营</p>
        <div class="price">
          <span>{{detailData.product_selling_price}}</span>
          <span class="del">{{detailData.product_price}}</span>
        </div>
        <div class="pro-list">
          <span class="pro-name">{{detailData.product_name}}</span>
          <span class="pro-price">
            <span>{{detailData.product_selling_price}}元</span>
            <span class="pro-del" style>{{detailData.product_price}}元</span>
          </span>
          <p class="price-sum">总计 : {{detailData.product_selling_price}}元</p>
        </div>
        <div class="button">
          <button type="button" class="el-button shop-cart el-button--default">
            <span>加入购物车</span>
          </button>
          <button type="button" class="el-button like el-button--default">
            <span>喜欢</span>
          </button>
        </div>
        <div class="pro-policy">
          <ul>
            <li>
              <i class="el-icon-circle-check"></i> 小米自营
            </li>
            <li>
              <i class="el-icon-circle-check"></i> 小米发货
            </li>
            <li>
              <i class="el-icon-circle-check"></i> 7天无理由退货
            </li>
            <li>
              <i class="el-icon-circle-check"></i> 7天价格保护
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Api from "../api/Particulars";
export default {
  data() {
    return {
      id: null,
      detailData: [],
      detailPicture: []
    };
  },
  created() {
    this.id = this.$route.query.productID;
    this.getDeatils();
    this.getDetailsPicture();
  },
  methods: {
    async getDeatils() {
      let res = await Api.getDeatils({ productID: this.id });
      this.detailData = res.Product[0];
      console.log(this.detailData);
    },
    async getDetailsPicture() {
      let res = await Api.getDetailsPicture({ productID: this.id });
      this.detailPicture = res.ProductPicture;
      console.log(this.detailPicture);
    }
  }
};
</script>

<style scoped="scoped">
.pro-policy li {
  float: left;
  margin-right: 20px;
  color: rgb(176, 176, 176);
}
.like {
  width: 260px;
  margin-left: 40px;
  background-color: rgb(176, 176, 176);
}
.shop-cart {
  width: 340px;
  background-color: rgb(255, 103, 0);
}
.button {
  height: 55px;
  margin: 10px 0px 20px;
}
.price-sum {
  color: rgb(255, 103, 0);
  font-size: 24px;
  padding-top: 20px;
}
.pro-del {
  margin-left: 10px;
  text-decoration: line-through;
}
.pro-price {
  float: right;
}
.pro-list {
  background: rgb(249, 249, 250);
  padding: 30px 60px;
  margin: 50px 0px;
}
.pro-name {
  line-height: 30px;
  color: rgb(97, 97, 97);
}
.del {
  font-size: 14px;
  margin-left: 10px;
  color: rgb(176, 176, 176);
  text-decoration: line-through;
}
.price {
  padding: 25px 0;
  font-size: 18px;
  color: #ff6700;
  border-bottom: solid 1px rgb(224, 224, 224);
}
.summarize {
  display: flex;
  padding: 0 130px;
  justify-content: space-between;
}
.summarize > div > span {
  margin-left: 10px;
}
img {
  width: 560px;
}
.slideshowLeft {
  float: left;
  width: 560px;
  height: 560px;
}
.slideshow {
  height: 560px;
  box-shadow: inset 0px 0px 10px #b0b0b0;
  background-color: white;
  padding: 30px 130px;
}
.slideshowRight {
  float: left;
  margin-left: 25px;
  width: 640px;
}
</style>